<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        li {
            list-style: none;
        }

        div {
            margin: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="input-group">
            <label>firstName:</label>
            <input type="text" v-model="firstName">
            <span>{{firstName}}</span>
        </div>
        <div class="input-group">
            <label>lastName:</label>
            <input type="text" v-model="lastName">
            <span>{{lastName}}</span>
        </div>
        <div class="input-group">
            <label>fullName:</label>
            <input type="text" v-model="fullName">
            <span>{{fullName}}</span>
        </div>
    </div>
</body>
<script>

    // 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护

    // 解决方式:
    // 1. 将复杂的操作整个为一个函数 => 放到 methods中,使用时调用即可
    // 缺点:
    // a. 每次调用方法代码都会重新执行
    // b. 每次数据更新(数据可能是和当前方法无关的数据),视图重新渲染 => 函数也会重新执行

    // 2. 使用计算属性 => Vue中的一个重要特性
    // 作为: 根据data中绑定的数据得到一个新值 (派生值 衍生值 -> 它的值会在Vue应用初次渲染时调用对应的函数得到,并缓存计算的结果) =>  计算属性可以依赖data中的一个或多个数据, 只有当依赖的数据发生改变之后,才会重新调用函数,计算并缓存新的结果

    // 计算属性是一个新值, 它的结果是根据data中的依赖数据响应式得到的,如果数据没有变动会一直使用缓存的结果

    // 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

    // 计算属性的取值拦截 和 赋值拦截
    // 计算属性默认只有 getter(取值)，不过在需要时你也可以提供一个 setter(赋值)：


    // 买东西     一个包子 2块钱
    // pay(新值) = price(依赖1) * num(依赖2); 
    //               2             2


    // fullName 依赖于 firstName 和 lastName


    // 需求:将数组中的每个元素放到对应的li标签内
    var vm = new Vue({
        el: "#app",
        data: {
            firstName: "",
            lastName: "",
        },
        methods: {

        },
        computed: {
            // fullName 依赖于 firstName 和 lastName  => 取值
            // fullName: function () {
            //     // return this.firstName + " " + this.lastName;
            //     return this.firstName + (this.lastName ? " " + this.lastName : "");
            // }

            fullName: {
                // getter => 取值拦截(对fullName 取值时执行的函数)
                get: function () {
                    console.log("fullName取值");
                    return this.firstName + (this.lastName ? " " + this.lastName : "");
                },
                // setter => 赋值拦截(对fullName 赋值时执行的函数)
                set: function (val) {
                    console.log("fullName赋值", val);
                    var list = val.split(" ");
                    console.log(list);
                    this.firstName = list[0];
                    this.lastName = list[1] ? list[1] : "";
                }
            }


        }

    })



</script>

</html>